<template>
    <div class="swipe">
      <mt-swipe :auto="2000">
        <mt-swipe-item :key="item.id" v-for="item in swipeListData">
          <router-link :to="item.link">
            <img :src="'https://av.wuyoufang.com' + item.image" alt="">
          </router-link>
        </mt-swipe-item>
        <!--<mt-swipe-item :key="item.id" v-for="item in swipeListData">-->
          <!--<a :href="item.link">-->
            <!--<img :src="'https://av.wuyoufang.com' + item.image" alt="">-->
          <!--</a>-->
        <!--</mt-swipe-item>-->

      </mt-swipe>

      <div class="radius">
        <div class="radius_bangs">
          <img src="../assets/image/bangs.png" alt="">
        </div>
      </div>
    </div>
</template>

<script>
  import Vue from 'vue';
  import {swipeList} from '../axios/api';
  import { Swipe, SwipeItem } from 'mint-ui';
  import {getCityName} from '../assets/js/cache';

  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);
  export default {
    name: 'IndexSwipe',
    data(){
      return{
        swipeListData:[]
      }
    },
    created(){
      this.getSwipeList();
    },
    methods:{
      //获取轮播图
      getSwipeList(){
        console.log(getCityName().CODE);
        swipeList(getCityName().CODE).then(res=>{
          console.log(res);
          this.swipeListData = res.data;
        }).catch(err=>{
        })
      }
    }
  }
</script>

<style scoped>
  .swipe{
    position: relative;
  }
  .swipe img {
    height: 100%;
    width: 100%;

  }
  .radius {
    width: 100%;
    position: absolute;
    /*border: 1px solid black;*/
    bottom: 5px;
    left: 0;
    /*z-index: 1;*/
  }
  .radius img{
    width: 100%;
    /*height: 20px;*/
  }
</style>
